<template>
  <el-button v-if="isPrem" :type="type" :size="size" :plain="plain" :round="round" :circle="circle" :loading="loading" :disabled="disabled" :icon="icon" :autofocus="autofocus" :native-type="nativeType" @click="handleClick()">
    <slot></slot>
  </el-button>
</template>

<script>
export default {
  name: 'MdButtonBaseComponent',
  props: {
    /**
     * 类型
     * primary / success / warning / danger / info / text
     * 无默认值
     */
    type: {
      type: String,
      default: 'default'
    },
    /** 
     * 尺寸
     * medium / small / mini
     */
    size: {
      type: String,
      default: null
    },
    /**
     * 是否朴素按钮
     */
    plain: {
      type: Boolean,
      default: false
    },
    /**
     * 是否圆角按钮
     */
    round: {
      type: Boolean,
      default: false
    },
    /**
     * 是否圆形按钮
     */
    circle: {
      type: Boolean,
      default: false
    },
    /**
     * 是否加载中状态
     */
    loading: {
      type: Boolean,
      default: false
    },
    /**
     * 是否禁用状态
     */
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * 图标类名
     */
    icon: {
      type: String,
      default: null
    },
    /**
     * 是否默认聚焦
     */
    autofocus: {
      type: Boolean,
      default: false
    },
    /**
     * 原生 type 属性
     * button / submit / reset
     */
    nativeType: {
      type: String,
      default: 'button'
    },
    /**
     * 权限标识
     */
    prems: {
      type: Array,
      default: () => ['*:*:*']
    }
  },
  data () {
    return {
      permissions: this.$local.getItem('permissions') || [],
      isPrem: true
    }
  },
  mounted () {
    this.handleIsPrem()
  },
  methods: {
    /** 判断当前按钮是否有权限 */
    handleIsPrem () {
      const allPermission = '*:*:*'

      if (this.permissions.length === 0) {
        this.isPrem = true
        return
      }

      console.log(123)

      if (this.prems && this.prems instanceof Array && this.prems.length > 0) {
        const hasPermissions = (this.permissions || []).some(prem => {
          return allPermission === prem || this.prems.includes(prem)
        })

        if (!hasPermissions) {
          this.isPrem = false
        }
      } else {
        throw new Error('请设置操作权限标签值')
      }
    },
    /** 点击事件 */
    handleClick () {
      this.$emit('click')
    }
  }
}
</script>